<template>
	<uv-waterfall ref="waterfall" v-model="list" :add-time="10" :left-gap="leftGap" :right-gap="rightGap"
		:column-gap="columnGap" @changeList="changeList">
		<!-- 第一列数据 -->
		<template v-slot:list1>
			<!-- 为了磨平部分平台的BUG，必须套一层view -->
			<view>
				<view @click="handleClick(item)" v-for="(item, index) in list1" :key="item.categoryId" class="waterfall-item">
					<view class="waterfall-item__image" >
						<Cover :width=getStyle(item).width :height=getStyle(item).height :cover="item.iconPath" :bgColor="item.bgColor" :title="item.categoryName"></Cover>
					</view>
					<view class="waterfall-item__ft">
						<view class="waterfall-item__ft__title">
							<text class="value">{{item.categoryName}}</text>
						</view>
						<view class="waterfall-item__ft__desc uv-line-2">
							<text class="value">{{item.description}}</text>
						</view>
						<view class="waterfall-item__ft__desc uv-line-3">
							<text class="value">{{item.questionCount == 0 ? "暂无题目" : `共${item.questionCount}个题目`}}</text>
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 第二列数据 -->
		<template v-slot:list2>
			<!-- 为了磨平部分平台的BUG，必须套一层view -->
			<view>
				<view @click="handleClick(item)" v-for="(item, index) in list2" :key="item.categoryId" class="waterfall-item">
					<view class="waterfall-item__image" >
						<Cover :width=getStyle(item).width :height=getStyle(item).height :cover="item.iconPath" :bgColor="item.bgColor" :title="item.categoryName"></Cover>
					</view>
					<view class="waterfall-item__ft">
						<view class="waterfall-item__ft__title">
							<text class="value">{{item.categoryName}}</text>
						</view>
						<view class="waterfall-item__ft__desc uv-line-2">
							<text class="value">{{item.description}}</text>
						</view>
						<view class="waterfall-item__ft__desc uv-line-3">
							<text class="value">{{item.questionCount == 0 ? "暂无题目" : `共${item.questionCount}个题目`}}</text>
						</view>
					</view>
				</view>
			</view>
		</template>
	</uv-waterfall>
</template>

<script setup>
	import Cover from './Cover.vue'
	import {
		guid
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import {
		watch,
		defineProps,
		ref,
		computed,
		onMounted,
		toRaw,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance();
	const tabs = ref([])
	const list = ref([])
	const list1 = ref([])
	const list2 = ref([])
	const leftGap = ref(10)
	const rightGap = ref(10)
	const columnGap = ref(10)
	const props = defineProps({
		parentId: {
			type: String,
			default: ''
		}
	})
	const handleClick = (item) => {
		if (item.questionCount == 0) return
		//设置传参类型为1代表该次传递的id为分类id
		item.type =1
		uni.navigateTo({
			url: `../parctise/PractiseQuestion?item=${encodeURIComponent(JSON.stringify(item))}`
		})
	}
	const loadCategoryList = async (id) => {
		let result = await proxy.Request({
			url: proxy.Api.loadCategory,
			params: {
				id
			},
			showLoading: false,
		});
		if (!result) {
			return;
		}
		list.value = result.data;
		// list.value.forEach(item => {
		// 	item.w = 100
		// 	item.h = 100
		// })
	};
	const loadTab = async () => {
		let result = await proxy.Request({
			url: proxy.Api.loadTabs,
			showLoading: false,
		});
		if (!result) {
			return;
		}
		tabs.value = result.data;
	};
	const getStyle = (item) => {
		const param = {
			...item
		}
		const v = uni.upx2px(750) - leftGap.value - rightGap.value - columnGap.value;
		const w = v / 2;
		const rate = w / param.w;
		const h = rate * param.h;
		return {
			width: w + 'px',
			height: h + 'px'
		}
	}
	watch(() => props.parentId, (newVal, oldVal) => {
		if (newVal != oldVal) {
			list.value = []
			list1.value = []
			list2.value = []
			loadCategoryList(newVal);
		}
	})
	const changeList = (e) => {
		if (e.name == 'list1') {
			list1.value.push(e.value)
		}
		if (e.name == 'list2') {
			list2.value.push(e.value)
		}
	}
	onMounted(() => {
		loadCategoryList();
	})
</script>
<style>
	page {
		background: #f1f1f1;
	}
</style>
<style lang="scss" scoped>
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}

	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;

		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;

			.value {
				font-size: 32rpx;
				color: #303133;
			}
		}

		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}

		&__btn {
			padding: 10px 0;
		}
	}
	.uv-line-3 {
		margin-top: 10px;
	}
</style>